<template>
<h1>循环指令</h1>
  <ul>
    <li v-for="item in 5">{{item}}</li>
  </ul>
  <ul>
    <li v-for="item in arr">{{item}}</li>
  </ul>
  <table border="1px">
    <caption>商品表</caption>
    <tr>
      <th>id</th>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item,index) in arr1">
      <td>{{index+1}}</td>
      <td>{{item.title}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td><button @click="del()">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
  import {ref} from "vue";

  const arr=[
      '张三','李四','王五','赵六'
  ]
  const arr1 = ref([
    {title: '小米16', price: 3333, num: 15},
    {title: '华为Mate 50', price: 4444, num: 8},
    {title: '苹果iPhone 14', price: 5555, num: 20},
    {title: '小米15', price: 2222, num: 10},
    {title: '小米15', price: 2222, num: 10, extra: '这是一个额外的属性，但比较时不应考虑它'} // 即便有额外属性，也应视为重复
  ])
  const del=(i)=>{
    if (confirm('是否要删除本行数据？')){
      arr1.value.splice(i,1);
    }
  }
</script>


<style scoped>

</style>